<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, cache } from '@utils';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['refresh']);

defineProps({
    expressCompanys: Array,
    // data: Object,
    // showBuyPriceValue: Number
});

const visible = ref(false);
const formRef = ref();
const showBuyPrice = ref(false);

const state = reactive({
    param: {},
    resData: {},
});

const rules = {
    sendTime: [{ required: true, message: '请选择', trigger: 'change' }],
    wuliuNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
    wuliuName: [{ required: true, message: '请选择', trigger: 'change' }],
    buyPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
};

const open = (item, showBuyPriceValue) => {
    showBuyPrice.value = showBuyPriceValue;
    state.param = { ...item };
    visible.value = true;
    if (showBuyPrice.value == 2) {
        service.bfqz.orderDetailQueryTrack(state.param).then(res => {
            res.body = JSON.parse(res.body);
            state.resData.value = res.body;
        });
        // state.resData.body = JSON.parse(state.resData.body)
    }
};

const close = () => {
    visible.value = false;
    state.param = {};
    state.resData.value = {};
    showBuyPrice.value = false;
};

const sure = async () => {
    if (showBuyPrice.value == 2) {
        close();
    } else {
        formRef.value.validate(valid => {
            if (valid) {
                realSubmit();
            }
        });
    }
};

const realSubmit = async () => {
    let param = toRaw(state.param);
    let res = null;
    if (showBuyPrice.value == 1) {
        param.state = '8';
        res = await service.bfqz.deliver(param);
    } else if (showBuyPrice.value == 0) {
        res = await service.bfqz.orderUpdate(param);
    }
    if (res) {
        ElMessage.success(showBuyPrice == 1 ? '发货成功' : showBuyPrice == 0 ? '修改成功' : '');
        close();
        emit('refresh');
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <section>
        <el-dialog v-model="visible" :title="showBuyPrice == 1 ? '确认发货' : showBuyPrice == 2 ? '查看物流' : '修改物流信息'" center :close-on-click-modal="false" @close="close" destroy-on-close :width="700">
            <section>
                <el-form v-if="showBuyPrice != 2" :model="state.param" :rules="rules" ref="formRef" label-width="100px" label-suffix=":" onsubmit="return false;">
                    <el-form-item label="发货时间" prop="sendTime">
                        <el-date-picker v-model="state.param.sendTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="发货时间" clearable></el-date-picker>
                    </el-form-item>
                    <el-form-item label="物流单号" prop="wuliuNumber">
                        <el-input v-model="state.param.wuliuNumber" placeholder="请输入物流单号" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="物流公司" prop="wuliuName">
                        <el-select v-model="state.param.wuliuName" style="width: 100%" placeholder="请选择物流公司" clearable>
                            <el-option v-for="{ label, val } in expressCompanys" :key="val" :label="label" :value="val" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="showBuyPrice == 1" label="进货价" prop="buyPrice">
                        <el-input v-model="state.param.buyPrice" type="number" placeholder="请输入进货价" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div>
                    <div v-for="(item, index) in state.resData.value" :key="index" style="margin-bottom: 6px">
                        <div>{{ item.remark }}</div>
                        <div style="color: #000">{{ item.acceptTime }}</div>
                    </div>
                </div>
            </section>

            <template #footer>
                <span class="flex-align-end">
                    <div class="margin-right20">
                        <el-button @click="close">取消</el-button>
                    </div>
                    <el-button type="primary" @click="sure">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </section>
</template>
